<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="_csrf" th:content="${_csrf.token}">
    <meta name="_csrf_header" th:content="${_csrf.headerName}">
    <link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" th:href="@{/css/global.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/editor-md/css/editormd.css}" />
    <title>发布帖子</title>
    <style>
        .emoji-picker {
            z-index: 1050;
        }
    </style>
</head>
<body class="bg-white">
<div class="nk-container">
    <!-- 头部 -->
    <header class="bg-dark sticky-top" th:replace="~{index::header}">
    </header>

    <!-- 内容 -->
    <div class="main" style="background-color: rgb(238,238,238)">
        <div class="container mt-5">
            <div class="form-group">
                <input type="text" class="form-control" style="font-size: 24px; font-weight: 500;"
                       id="recipient-name" placeholder="输入文章标题..." required th:value="${title}">
            </div>

<!--            <div class="text-right mt-2">-->
<!--                <button type="button" class="btn btn-light btn-sm emoji-button">😊</button>-->
<!--            </div>-->

            <div id="test-editormd" style="width:2000px;">
                <textarea class="form-control" id="message-text" style="display:none;" th:text="${content}"></textarea>
            </div>

            <div style="text-align: center">
                <button type="button" class="btn btn-outline-secondary" id="backIndexBtn">返回首页</button>
                <button type="button" class="btn btn-outline-primary" id="publishBtn"
                        style="color: rgb(51, 133, 255)" >发布文章</button>
            </div>

            <!-- 提示框 -->
            <div class="modal fade" id="hintModal" tabindex="-1" role="dialog" aria-labelledby="hintModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="hintModalLabel">提示</h5>
                        </div>
                        <div class="modal-body" id="hintBody"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 尾部 -->
    <footer class="bg-dark" th:replace="~{index::footer}">
    </footer>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script th:src="@{/js/global.js}"></script>
<script th:src="@{/editor-md/editormd.min.js}"></script>
<!--<script th:src="@{/js/emoji.js}"></script>-->
<script type="text/javascript">
    var testEditor;

    $(function() {
        testEditor = editormd("test-editormd", {
            width: "90%",
            height: 640,
            syncScrolling: "single",
            path: "../editor-md/lib/",
            saveHTMLToTextarea: true, // 方便post提交表单
            placeholder: "欢迎来到帖子发布界面~ 本论坛支持 Markdown/非Markdown 格式的帖子~",
            // 上传图片
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : CONTEXT_PATH + "/discuss/uploadMdPic", // 后端上传图片的服务地址
            onload : function() {}
        });

        // 拦截 @ 符号输入
        $('#test-editormd').on('keypress', function(e) {
            if (e.which === 64) { // ASCII code for @
                e.preventDefault();
            }
        });
    });

    $(function() {
        $("#publishBtn").click(publish);
        $("#backIndexBtn").click(backIndex);

        // const button = document.querySelector('.emoji-button');
        // const picker = new EmojiButton();
        // picker.on('emoji', emoji => {
        //     testEditor.insertValue(emoji);
        // });

        // button.addEventListener('click', () => {
        //     picker.showPicker(button);
        // });
    });

    function publish() {
        var title = $('#recipient-name').val().trim();
        var content = testEditor.getMarkdown().trim();

        if (title === "") {
            showHintModal("标题不能为空");
            return;
        }

        if (content === "") {
            showHintModal("内容不能为空");
            return;
        }

        $('#publishModal').modal('hide');

        // 异步请求携带csrf认证
        let token = $("meta[name='_csrf']").attr("content");
        let header = $("meta[name='_csrf_header']").attr("content");
        $(document).ajaxSend(function(e, xhr, options) {
            xhr.setRequestHeader(header, token);
        });

        $.post(
            CONTEXT_PATH + "/discuss/add",
            {"title": title, "content": content},
            function(data) {
                data = $.parseJSON(data);
                $("#hintBody").text("发布成功！");
                $("#hintModal").modal("show");
                setTimeout(function() {
                    $("#hintModal").modal("hide");
                    if (data.code === 0) {
                        location.href = CONTEXT_PATH + "/index";
                    }
                }, 2000);
            }
        );
    }

    function showHintModal(message) {
        $("#hintBody").text(message);
        $("#hintModal").modal("show");
        setTimeout(function() {
            $("#hintModal").modal("hide");
        }, 2000);
    }

    function backIndex() {
        location.href = CONTEXT_PATH + "/index";
    }
</script>
</body>
</html>